@layer base {
    :root {
        --dashboard-spacing: 1.25rem;
        --card-radius: 0.75rem;
    }

    .dashboard-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }
}

@layer components {
    .data-card {
        @apply bg-white/80 backdrop-blur-sm border border-gray-100;
        box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.05);
        border-radius: var(--card-radius);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

        &:hover {
            @apply bg-white border-blue-100;
            box-shadow: 0 8px 32px -8px rgba(0, 123, 255, 0.1);
            transform: translateY(-2px);
        }
    }
}